<!--
 * @Description: 登录
 * @Author: rendc
 * @Date: 2023-03-10 14:51:04
 * @LastEditors: rendc
 * @LastEditTime: 2023-03-10 15:11:04
-->
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import "vant/es/toast/style";
const router = useRouter();
const phoneNumber = ref("");
const checked = ref(false);
const inputCode = ref("");
const realCode = ref("");

// 如果showPhoneInput 为true 那么页面上展示的就是 手机号输入框和下一步按钮
const showPhoneInput = ref(true);
const onSubmit = () => {
  // 判断用户是否同意协议
  if (checked.value) {
    // 用户同意协议
    showPhoneInput.value = false;
    // 发送验证码
    sendCode();
  } else {
    // 用户同意协议 - 弹窗提醒
    showToast({
      message: "请同意用户协议",
      position: "bottom",
    });
  }
};
// 修改手机号
const toLogin = () => {
  showPhoneInput.value = true;
};
const sendCodeBtn = ref(true);
const sendCodeBtnText = ref("60秒后重发");
// 生成验证码
const sendCode = () => {
  const sendCodeTime = ref(60);
  if (sendCodeTime.value > 0) {
    const intervalId = setInterval(() => {
      sendCodeTime.value--;
      sendCodeBtnText.value = sendCodeTime.value + "秒后重发";
      if (sendCodeTime.value == 0) {
        // 销毁定时器
        clearInterval(intervalId);
        sendCodeBtn.value = false;
        sendCodeBtnText.value = "发送验证码";
      }
    }, 1000);
  }
  let code = "";
  // let now = new Date();
  for (let i = 0; i < 4; i++) {
    code += Math.floor(Math.random() * 10);
  }
  // 发送验证码
  realCode.value = code;
  console.log("🤡 CC - onSubmit - code:", realCode.value);
};
// 点击登录按钮
const myLogin = () => {
  // 如果验证码框有内容 代表要登录了
  if (inputCode.value == realCode.value) {
    // 登录成功 储存用户的手机号
    sessionStorage.setItem("user", phoneNumber.value);
    // 可以登录
    router.push("/");
  } else {
    showToast({
      message: "请输入正确的验证码",
      position: "bottom",
    });
  }
};

</script>
<template>
  <div class="meidi_logo">
    <img src="src/assets/meidi_logo.png" alt="">
  </div>
  <div class="login">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field class="tel" v-model="phoneNumber"
            left-icon="src/assets/手机号.png"
            placeholder="请输入手机号" :rules="[{ required: true }]" />
        </van-cell-group>
      <div v-if="showPhoneInput">
        <div style="margin: 16px;">
          <van-button class="hq" round block type="primary" native-type="submit" :disabled="!phoneNumber">
            获取验证码
          </van-button>
          <van-checkbox class="checkbox" v-model="checked">我已阅读并同意<a
              href="https://sec.midea.com/mobile/agreement/?system=mideamall&channel_code=1.1.1.3.2.20.1.1&redirect_uri=https%3A%2F%2Fm.midea.cn%2Fnext%2Fuserinfo%2Floginbyc4atokencallback%3Frurl%3Dhttps%253A%252F%252Fm.midea.cn%252Fmy%252Findex%253Fmtag%253D40004.1.10133%26ptype%3D1%26channel_code%3D1.1.1.3.2.20.1.1%26system%3Dmideamall&agreement_id=172">《用户协议》</a>
            和 <a
              href="https://sec.midea.com/mobile/agreement/?system=mideamall&channel_code=1.1.1.3.2.20.1.1&redirect_uri=https%3A%2F%2Fm.midea.cn%2Fnext%2Fuserinfo%2Floginbyc4atokencallback%3Frurl%3Dhttps%253A%252F%252Fm.midea.cn%252Fmy%252Findex%253Fmtag%253D40004.1.10133%26ptype%3D1%26channel_code%3D1.1.1.3.2.20.1.1%26system%3Dmideamall&agreement_id=173">《隐私政策》</a>
          </van-checkbox>
        </div>
      </div>
      <div v-if="!showPhoneInput">
        
          <!--
            <van-row>
            <van-cell-group inset>
          <van-field v-model="phoneNumber" placeholder="请输入手机号" :rules="[{ required: true, message: '请输入手机号' }]" />
        </van-cell-group>
      <van-col span="4">
            <div class="myBtn" @click="toLogin()">修改</div>
          </van-col>
        </van-row>-->
          
        <!-- <van-cell-group inset>
              <van-field
                v-model="inputCode"
                placeholder="请输入验证码"
                :rules="[{ required: true, message: '请输入验证码' }]"
              />
            </van-cell-group> -->
        <van-cell-group inset>
          <van-field v-model="inputCode" center clearable label="验证码" placeholder="请输入验证码">
            <template #button>
              <van-button size="small" type="primary" @click="sendCode()" :disabled="sendCodeBtn">{{ sendCodeBtnText
              }}</van-button>
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" :disabled="!inputCode" @click="myLogin()">
            注册/登录
          </van-button>
        </div>
      </div>
    </van-form>
  </div>
  <div style="height: 100px;width: 100%;position: fixed;bottom: 0;text-align: center;">
    <a href="">密码登录</a>
  </div>
</template>

<style lang="less" scoped>
.meidi_logo {

  img {
    width: 390px;
    height: 156px;
  }

  width: 390px;
  height: 150px;
  line-height: 150px;
}

.login {
  text-align: center;
  .tel{
    margin-top: 30px;
    left-icon{
      width: 18px;
      height: 18px;
      margin-top: 14px;
    }
    :deep(.van-icon__image){
      margin-top: 3px;
      padding-left: 14px;
      padding-right: 14px;
      width: 18px;
      height: 18px;
    }
  }
  .text {
    font-size: 13.888px;
    color: rgba(0, 0, 0, 0.6);
    margin-top: 15.277px;
  }

  .textPhoneNumber {
    text-align: left;
    margin-left: 16px;
  }

  .myBtn {
    margin-top: 15.277px;
    font-size: 13.88px;
    color: #0b84ff;
  }
  .hq{
    font-size: 16px;
    letter-spacing: 2px;
    text-align: center;
  }
  .checkbox {
    margin-top: 17px;
    color: #666;
    font-size: 12px;
    line-height: 20px;

    a {
      color: #0b84ff;
    }
  }

  
  
}
</style>

  
